<template>
  <div style="padding:20px;" id="app">
    <div class="panel panel-primary">
      <div class="align-center">
  <el-table
    :data="tableData.filter(data => !search || data.dname.toLowerCase().includes(search.toLowerCase()))"
    border
    style="width: 100%">
    <el-table-column
      prop="dname"
      label="数据源名称"
      width="180">
    </el-table-column>
    <el-table-column
      prop="dtype"
      label="数据源类型"
      width="180">
    </el-table-column>
      <el-table-column
        prop="dadress"
        label="连接地址">
      </el-table-column>
    <el-table-column
      align="center">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="根据数据源名称搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete(scope.$index, scope.row)">Delete</el-button>
      </template>
    </el-table-column>
  </el-table>
</div>
  </div>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          search: '',
          tableData: [{
            dname: '2016-05-02',
            dtype: '王小虎',
            dadress: '上海市普陀区金沙江路 1518 弄'
          }]
        }
      },
      methods: {
        handleDelete(index, row) {
          this.$confirm('此操作将永久删除该数据源, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$http.post('http://127.0.0.1:8091/datasource/deleteDatasourceById',
              {
                "id":row.id,
              }
              ,{emulateJSON: true}).then((response) => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.getData()
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        getData(){
          this.$http.post('http://127.0.0.1:8091/datasource/listDatasourceByType',
            {
              "dtype":1,
            }
            ,{emulateJSON: true}).then((response) => {
            // if(response.bodyText = "success"){
            this.tableData = response.body
            this.tableData.forEach(item =>{
              item.dtype = 'Hive数据源'
            })
          });
        }

      },
      created() {
        this.getData()
      }
    }
</script>

<style type="text/css">
  .align-center{
    margin:0 50px;      /* 居中 这个是必须的，，其它的属性非必须 */
    width:1200px;        /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
    background:white;     /* 背景色 */
    text-align:center;  /* 文字等内容居中 */
  }
</style>
